<!-- 素材库页面 -->
<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="body">
		<!-- 顶部 -->
		<view class="header">
			<view class="user-box">
				<view v-if="UId" class="one">
					<view class="avatar">
						<img :src="USER_INFO.avatar">
					</view>
					<view class="name">
						{{USER_INFO.username}}
					</view>
				</view>
				<view v-else class="two">
					未登录用户
				</view>
			</view>
		</view>
		<!-- 卡片 -->
		<view v-if="true" class="head_box">
			<u-search
			v-model="searchVal"
			margin="30rpx"
			 placeholder="搜索素材"
			height="64"
			@search="onSearch"
			@custom="onSearch"
			@clear="clearSearch"></u-search>
		</view>
		<view class="card-box">
			<view v-for="item,index in resList" :key="index" class="card">
				<view class="card-avatar">
					<img v-if="USER_INFO.avatar" :src="USER_INFO.avatar">
					<img v-else src="https://image.hzwltb69.com/upload/common/logo_108.png" alt="">
				</view>
				<view class="card-content">
					<view v-html="filter(item.content)" class="content">
					</view>
					<view class="img-box">
						<img v-for="items,indexs in item.imgs" @click="onLook(item.imgs,indexs)"
						:key="indexs"
						:src="items">
					</view>
					<view  @click="toDetail(item.productId)" class="tip">
						<view class="tip-content">
							{{item.content}}
						</view>
						<view class="arrow">
							<img src="https://image.hzwltb69.com/app/imgs/derivative/rights.png" alt="">
						</view>
					</view>
					<view class="time">
						<view class="" style="font-size: 25rpx;margin-top: 10rpx;">
							{{item.createTime}}
						</view>
						<view v-if="hasDerivative" class="copy">
							<view @click="onCopy(item.productId,item.content)" class="copy-box">
								复制链接
							</view>
							<view class="copy-box" @click="onGetImg(item.imgs)">
								保存图片
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<u-loadmore v-show="isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<uni-popup ref="popup" type="center"  @change="change">
			<view class="contents">
				<p v-html="filter(infoData.content)"></p>
				<p>{{'点击购买👉' +  infoData.link}}</p>
			</view>
			<view @click="onDel" class="copy-btn">
				确定复制
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				UId: uni.getStorageSync('UId'),
				USER_INFO: uni.getStorageSync('userinfo'),
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				isEmpty: false,
				page: 1,
				show:false,
				SIZE: 10,
				resList:[],
				infoData: {
					link: '',
					content: ''
				},
				onEnd: false,
				hasDerivative: uni.getStorageSync('hasDerivative'),
				searchVal: '',
			}
		},
		onReachBottom() {
			if(this.onEnd) return
			this.page += 1
			this.getList()
		},
		onPullDownRefresh() {
			this.resList = []
			this.page = 0
			this.getList()
		},
		onLoad() {
			let that = this
			that.getList()
		},
		methods:{
			onSearch(){
				if(!this.searchVal) return
				this.page = 0
				this.resList = []
				this.getList()
			},
			clearSearch(){
				this.page = 0
				this.searchVal = ''
				this.resList = []
				this.getList()
			},
			filter(e){
				const regex = /\n/g;
				const replacedString = e.replace(regex, "<br>");
				return replacedString
			},
			// 激活弹窗
			onCopy(e,data){
				this.infoData.content = data
				this.getInfo(e)
			},
			getInfo(e){
				let that = this
				that.$http('goods.resourcesInfo',{
					productId: e,
					memberId: that.USER_INFO.id
				})
				.then(res =>{
					that.infoData.link = res.link
					this.$refs.popup.open('center')
				})
			},
			// 复制
			onDel(){
				let that = this
				uni.setClipboardData({
					data: that.infoData.content + '\n' + '点击购买👉' + that.infoData.link,
					showToast: true,
					success(e){
						that.$refs.popup.close()
					}
				})
			},
			// 跳转商品
			toDetail(e){
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: e,
						ownerId: uni.getStorageSync('UId')
					}
				})
			},
			getList(){
				let that = this 
				that.isEmpty = true
				that.loadStatus = 'loading'
				that.$http('goods.resourcesList',{
					page:that.page,
					size:that.SIZE,
					keyword: that.searchVal
				})
				.then(res =>{
					if(res.data.length > 0){
						console.log(res.data)
						for(var i in res.data){
							res.data[i].imgs = JSON.parse(res.data[i].imgs)
						}
						let list = res.data
						that.resList.length == 0 ? that.resList = list : that.resList = that.resList.concat(list)
						res.data.length == 10 ? that.loadStatus = 'loadmore' : that.loadStatus = 'nomore'
					}else{
						// 没有更多
						that.onEnd = true
						that.loadStatus = 'nomore'
					}
				})
			},
			onLook(e,i){
				uni.previewImage({
					urls: e,
					current:i
				})
			},
			change(e){
				this.show = e.show
			},
			onGetImg(e){
				uni.getSetting({
				success:(success)=>{
					if(!success.authSetting["scope.writePhotosAlbum"]){
						console.log('没有相册权限');
						uni.authorize({
						scope: "scope.writePhotosAlbum",
						success:(e)=>{
							uni.showToast({
								title:'授权成功,请重新保存',
								icon:'none'
							})
						},
					})
					}else{
						e.forEach(item => {
					uni.downloadFile({
						url: item,
						success(e) {
							uni.saveImageToPhotosAlbum({
								filePath:e.tempFilePath,
								success(e) {
									uni.showToast({
										title:'保存成功',
										icon:'success'
									})
								},
								fail(e) {
									uni.showToast({
										title:'保存失败',
										icon:'error'
									})
								}
							})
						}
					})
				})
					}
				},
			})

			}
		}
	}
</script>

<style lang="scss">
	.body{
		.header{
			width: 100%;
			height: 30vh;
			// background: linear-gradient(0deg, #fd7818, #f86324);
			position: relative;
			background: url('https://image.hzwltb69.com/app/other/b1.jpg') no-repeat;
			background-size: 100% 100%;
			.user-box{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 130rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0 0 ;
				padding-left: 40rpx;
				display: flex;
				.one{
					display: flex;
					.avatar{
						width: 120rpx;
						height: 120rpx;
						border: 8rpx solid #fff;
						border-radius: 10rpx;
						position: relative;
						bottom: 50rpx;
						img{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.name{
						margin-left: 30rpx;
						margin-top: 10rpx;
					}
				}
				.two{
					margin-top: 30rpx;
				}
			}
		}
	    .card-box{
			margin-top: 30rpx;
			.card{
				width: 100%;
				height: 100%;
				background-color: #fff;
				padding: 30rpx 30rpx 30rpx 20rpx;
				display: flex;
				margin-bottom: 20rpx;
				.card-avatar{
					width: 100rpx;
					border-radius: 50%;
					img{
						border-radius: 50%;
						width: 100rpx;
						height: 100rpx;
					}
				}
				.card-content{
					margin-left: 20rpx;
					width: 100%;
					.content{
						// background-color: pink;
					}
					.img-box{
						margin-top: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						img{
							object-fit: cover;
							margin-right: 5rpx;
							width: 150rpx;
							height: 150rpx;
						}
					}
					.tip{
						width: 100%;
						height: 70rpx;
						background-color: #f5f5f5;
						line-height: 70rpx;
						color: #9e9e9e;
						display: flex;
						.tip-content{
							margin-left: 10rpx;
							width: 450rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.arrow{
							margin-left: 40rpx;
							img{
								width: 30rpx;
								height: 30rpx;
								margin-top: 20rpx;
							}
						}
					}
					.time{
						margin-top: 40rpx;
						color: #5a5a5a;
						display: flex;
						justify-content: space-between;
						.copy{
							display: flex;
							.copy-box{
								width: 150rpx;
								height: 55rpx;
								// background: #f86324;
								border: 1rpx solid #f86324;
								margin-right: 5rpx;
								border-radius: 20rpx;
								line-height: 55rpx;
								text-align: center;
								color: #5a5a5a;
							}
						}
					}
				}
			}
		}
	}
	.contents{
		width: 600rpx;
		padding: 25rpx;
		border-radius: 25rpx;
		background-color: #fff;
	}
	.copy-btn{
		margin-left: 220rpx;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 5rpx;
		margin-top: 30rpx;
		background-color: #fff;
		color: #f96523;
	}
</style>